<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿京东</title>
    <link rel="stylesheet" href="css/jingdongcss.css">
    <link rel="stylesheet" href="css/common.css">
    <script src="js/animate.js"></script> 
    <script src="js/lunbo.js"></script> 
</head>
<body>
    <header class="w">
        <!-- 左侧导航栏 -->
       <div class="nav_items">
           <ul>
               <li> 
                   <a href="#">家用电器</a>
               </li>
               <li> 
                   <a href="#">手机</a>
                   <span class="span_link">/</span>
                   <a href="#">运营商</a>
                   <span class="span_link">/</span> 
                   <a href="#">数码</a>
               </li>
               <li> 
                   <a href="#">电脑</a>
                   <span class="span_link">/</span>
                   <a href="#">办公</a>
               </li>
               <li> 
                   <a href="#">家居</a>
                   <span class="span_link">/</span>
                   <a href="#">家具</a>
                   <span class="span_link">/</span>
                   <a href="#">家装</a>
                   <span class="span_link">/</span>
                   <a href="#">厨具</a>
               </li>
               <li> 
                   <a href="#">男装</a>
                   <span class="span_link">/</span>
                   <a href="#">女装</a>
                   <span class="span_link">/</span>
                   <a href="#">童装</a>
                   <span class="span_link">/</span>
                   <a href="#">内衣</a>
               </li>
               <li> 
                   <a href="#">美妆</a>
                   <span class="span_link">/</span>
                   <a href="#">个人清洁</a>
                   <span class="span_link">/</span>
                   <a href="#">宠物</a>
               </li>
               <li> 
                   <a href="#">女鞋</a>
                   <span class="span_link">/</span>
                   <a href="#">箱包</a>
                   <span class="span_link">/</span>
                   <a href="#">钟表</a>
                   <span class="span_link">/</span>
                   <a href="#">珠宝</a>
               </li>
               <li> 
                   <a href="#">男鞋</a>
                   <span class="span_link">/</span>
                   <a href="#">运动</a>
                   <span class="span_link">/</span>
                   <a href="#">户外</a>
               </li>
               <li> 
                   <a href="#">房产</a>
                   <span class="span_link">/</span>
                   <a href="#">汽车</a>
                   <span class="span_link">/</span>
                   <a href="#">汽车用品</a>
               </li>
               <li> 
                   <a href="#">母婴</a>
                   <span class="span_link">/</span>
                   <a href="#">玩具乐器</a>
               </li>
               <li> 
                   <a href="#">食品</a>
                   <span class="span_link">/</span>
                   <a href="#">酒类</a>
                   <span class="span_link">/</span>
                   <a href="#">生鲜</a>
                   <span class="span_link">/</span>
                   <a href="#">特产</a>
               </li>
               <li> 
                   <a href="#">艺术</a>
                   <span class="span_link">/</span>
                   <a href="#">礼物鲜花</a>
                   <span class="span_link">/</span>
                   <a href="#">农资绿植</a>
               </li>
               <li> 
                   <a href="#">医药保健</a>
                   <span class="span_link">/</span>
                   <a href="#">计生情趣</a>
               </li>
               <li> 
                   <a href="#">图书</a>
                   <span class="span_link">/</span>
                   <a href="#">文娱</a>
                   <span class="span_link">/</span>
                   <a href="#">教育</a>
                   <span class="span_link">/</span>
                   <a href="#">电子书</a>
               </li>
               <li> 
                   <a href="#">机票</a>
                   <span class="span_link">/</span>
                   <a href="#">酒店</a>
                   <span class="span_link">/</span>
                   <a href="#">旅游</a>
                   <span class="span_link">/</span>
                   <a href="#">生活</a>
               </li>
               <li> 
                   <a href="#">理财</a>
                   <span class="span_link">/</span>
                   <a href="#">众筹</a>
                   <span class="span_link">/</span>
                   <a href="#">白条</a>
                   <span class="span_link">/</span>
                   <a href="#">保险</a>
               </li>
               <li> 
                   <a href="#">安装</a>
                   <span class="span_link">/</span>
                   <a href="#">维修</a>
                   <span class="span_link">/</span>
                   <a href="#">清洁</a>
                   <span class="span_link">/</span>
                   <a href="#">二手</a>
               </li>
               <li> 
                   <a href="#">工业品</a>
               </li>

           </ul>
            <div class="siderbar" style="display: none;">
                <div class="sdr_content" style="display: none;;">
                    <dl>
                        <dt>
                            <a href="#">详细一 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <a href="#">详细一 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <a href="#">详细一 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                </div>
                <div class="sdr_content" style="display: none;;">
                    <dl>
                        <dt>
                            <a href="#">详细二 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <a href="#">详细一 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <a href="#">详细一 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                </div>
                <div class="sdr_content" style="display: none;;">
                    <dl>
                        <dt>
                            <a href="#">详细三</a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <a href="#">详细一 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <a href="#">详细一 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                </div>
                <div class="sdr_content" style="display: none;;">
                    <dl>
                        <dt>
                            <a href="#">详细四 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <a href="#">详细一 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <a href="#">详细一 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                </div>
                <div class="sdr_content" style="display: none;;">
                    <dl>
                        <dt>
                            <a href="#">详细五 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <a href="#">详细一 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <a href="#">详细一 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                </div>
                <div class="sdr_content" style="display: none;;">
                    <dl>
                        <dt>
                            <a href="#">详细六 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <a href="#">详细一 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <a href="#">详细一 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                </div>
                <div class="sdr_content" style="display: none;;">
                    <dl>
                        <dt>
                            <a href="#">详细七 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <a href="#">详细一 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <a href="#">详细一 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                </div>
                <div class="sdr_content" style="display: none;;">
                    <dl>
                        <dt>
                            <a href="#">详细八 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <a href="#">详细一 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <a href="#">详细一 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                </div>
                <div class="sdr_content" style="display: none;;">
                    <dl>
                        <dt>
                            <a href="#">详细九 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <a href="#">详细一 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <a href="#">详细一 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                </div>
                <div class="sdr_content" style="display: none;;">
                    <dl>
                        <dt>
                            <a href="#">详细十 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <a href="#">详细一 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <a href="#">详细一 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                </div>
                <div class="sdr_content" style="display: none;;">
                    <dl>
                        <dt>
                            <a href="#">详细十一 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <a href="#">详细一 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <a href="#">详细一 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                </div>
                <div class="sdr_content" style="display: none;;">
                    <dl>
                        <dt>
                            <a href="#">详细十二 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <a href="#">详细一 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <a href="#">详细一 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                </div>
                <div class="sdr_content" style="display: none;;">
                    <dl>
                        <dt>
                            <a href="#">详细十三 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <a href="#">详细一 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <a href="#">详细一 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                </div>
                <div class="sdr_content" style="display: none;;">
                    <dl>
                        <dt>
                            <a href="#">详细十四 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <a href="#">详细一 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <a href="#">详细一 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                </div>
                <div class="sdr_content" style="display: none;;">
                    <dl>
                        <dt>
                            <a href="#">详细十五 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <a href="#">详细一 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <a href="#">详细一 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                </div>
                <div class="sdr_content" style="display: none;">
                    <dl>
                        <dt>
                            <a href="#">详细十六 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <a href="#">详细一 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <a href="#">详细一 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                </div>
                <div class="sdr_content" style="display: none;">
                    <dl>
                        <dt>
                            <a href="#">详细十七 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <a href="#">详细一 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <a href="#">详细一 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                </div>
                <div class="sdr_content" style="display: none;">
                    <dl>
                        <dt>
                            <a href="#">详细十八 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <a href="#">详细一 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <a href="#">详细一 </a><span> > </span>
                        </dt>
                        <dd>
                            <a href="#">详细分类</a>
                        </dd>
                    </dl>
                </div>
            </div>
       </div>    

       <!-- 轮播图 -->
       <div class="focus_item">
        <a href="javascript:;" class="jiantou" id="prev"> &lt; </a>
           <div class="item_img" style="left: 0px;">

             <ul >
               <li class="focus_item_img"><a href="#"><img src="images/lunbo/1.webp" alt=""></a></li>
               <li class="focus_item_img"><a href="#"><img src="images/lunbo/2.webp" alt=""></a></li>
               <li class="focus_item_img"><a href="#"><img src="images/lunbo/3.webp" alt=""></a></li>
               <li class="focus_item_img"><a href="#"><img src="images/lunbo/4.webp" alt=""></a></li>
               <li class="focus_item_img"><a href="#"><img src="images/lunbo/5.webp" alt=""></a></li>
               <li class="focus_item_img"><a href="#"><img src="images/lunbo/6.webp" alt=""></a></li>
                          
            </ul>
             <a href="javascript:;" class="jiantou" id="next">  &gt;</a>
        </div>
        <ol class="circle">

        </ol>
    
       </div>

       <!-- 小图片 -->
       <div class="focus_other">
          <a href="#"> <img src="images/add6c26d6ec23cf6.jpg.webp" alt=""></a> 
          <a href="#"> <img src="images/e030d4eb0a6c9d25.jpg.webp" alt=""></a> 
          <a href="#"> <img src="images/f6b2c000e5f59868.jpg.webp" alt=""></a> 
       </div>

       <!-- 最右侧 -->
       <div class="nav_right">
           <div class="user_0">
                <div class="user_1">
                    <div class="user_img">
                        <a href="#">个人头像
                            <img src="images/tou.png" alt="">
                        </a>
                    </div>
                    <div class="user_show">
                        <a href="#">Hi~欢迎逛京东！</a>
                        <p><a href=""> 登录 </a> | <a href=""> 注册 </a> </p>
                    </div>
                    <div class="fuli">
                        <a href="#" class="fuli_lt">新人福利</a>
                        <a href="#" class="fuli_rt">PLUS会员</a>
                    </div>
                </div>
                <div class="news">
                    <div class="tit">
                        <h5>京东快报</h5>
                        <a href="#">更多 ></a>
                    </div>
                    <ul class="news_list">
                        <li class="news_items">
                            <a href="#">
                                <span>热议</span>
                                纸尿裤多久更换一次才合适？
                            </a>
                        </li>
                        <li class="news_items">
                            <a href="#">
                                <span>推荐</span>
                                纸尿裤多久更换一次才合适？
                            </a>
                        </li>
                        <li class="news_items">
                            <a href="#">
                                <span>热门</span>
                                纸尿裤多久更换一次才合适？
                            </a>
                        </li>
                        <li class="news_items">
                            <a href="#">
                                <span>推荐</span>
                                纸尿裤多久更换一次才合适？
                            </a>
                        </li>

                    </ul>
                </div>
                    <div class="service">
                        <ul class="service_list">
                            <li><a href="#"><img src="images/eed6f6cbf1de3aaa.png" alt=""><span>话费</span></a></li>
                            <li><a href="#"><img src="images/afb4399323fe3b76.png" alt=""><span>机票</span></a></li>
                            <li><a href="#"><img src="images/5fee386254dd2ebc.png" alt=""><span>酒店</span></a></li>
                            <li><a href="#"><img src="images/caa83ce9b881cd24.png" alt=""><span>游戏</span></a></li>
                            <li><a href="#"><img src="images/9570fdd46ecd3a76.png" alt=""><span>加油卡</span></a></li>
                            <li><a href="#"><img src="images/f12276b17e5dcf3b.png" alt=""><span>火车票</span></a></li>
                            <li><a href="#"><img src="images/cebbff76b25dc22e.png" alt=""><span>众筹</span></a></li>
                            <li><a href="#"><img src="images/4b49b55af25a7bdf.png" alt=""><span>理财</span></a></li>
                            <li><a href="#"><img src="images/b8a8418d5418f471.png" alt=""><span>白条</span></a></li>
                            <li><a href="#"><img src="images/90a218f053e903d2.png" alt=""><span>电影院</span></a></li>
                            <li><a href="#"><img src="images/671f7c186c5e9b01.png" alt=""><span>企业购</span></a></li>
                            <li><a href="#"><img src="images/5da079255c6dfabe.png" alt=""><span>礼品卡</span></a></li>
                        </ul>
                    </div>
                </div>
       </div>
    </header>
    <!-- <script>
           //获取所有的li
    var lis =document.querySelector('.nav_items').querySelectorAll('li');
    console.log(lis);
    //获取所有的详细菜单
    var content = document.querySelectorAll('.sdr_content');
    console.log(content);
    //获得菜单背景
    var sb =document.querySelector('.siderbar');
    console.log(sb);
    //判断详细菜单和li的个数是否相等
    // if(content.length!=lis.length)
    // return;
    //for循环给所有的li增加索引值
    for(let i =0;i<lis.length;i++){
        lis[i].id=i;
    //鼠标事件，移到其中一个li对应的content会显示
        lis[i].onmouseenter = function(){
            //for循环为移走的li的content的block清除掉
            for(let j =0; j<lis.length;j++){
                 content[j].style.display = 'none';
            }
            //显示siderbar和对应li的content
            sb.style.display='block';
            content[this.id].style.display='block';
        }
        lis[i].onmouseleave = function(){
            //for循环清除content的block
            for(let j =0; j<lis.length;j++){
                 content[j].style.display = 'none';
                 
            }
            sb.style.display='none';
        }
    }
    </script> -->
<script src="js/nav.js"></script>
</body>
</html>